<template>
  <div style="height:100%;display:flex;flex-direction:column">
    <el-card >
      <div slot="header">
        <span style="color: #8497b3">房源管理</span>
      </div>

      <el-form :model="form" ref="form" class="put">
        <el-form-item prop="username" class="input" label="用户姓名">
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item prop="phone" class="input" label="手机号码">
          <el-input v-model="form.phone" />
        </el-form-item>

        <el-form-item prop="createtime" class="input" label="创建时间">
          <el-input v-model="form.createtime" />
        </el-form-item>

        <el-form-item class="input" style="width: 30px; margin-right: 50px">
          <el-button type="info" @click="reset('form')">重置</el-button>
        </el-form-item>

        <el-form-item class="input">
          <el-button @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 5px;flex:1">
      <el-menu mode="horizontal" :default-active="state" >
        <el-menu-item index="1">全部</el-menu-item>
        <el-menu-item index="2">启用</el-menu-item>
        <el-menu-item index="3">禁用</el-menu-item>
      </el-menu>

      <template>
        <el-table :data="usernames">
          <el-table-column
            align="center"
            label="房源编号"
            prop="houseid"
          ></el-table-column>

          <el-table-column
            align="center"
            label="状态"
            prop="state"
          ></el-table-column>
          <el-table-column
            align="center"
            label="房源类型"
            prop="type"
          ></el-table-column>
          <el-table-column
            align="center"
            label="单位价格"
            prop="price"
          ></el-table-column>
          <el-table-column
            align="center"
            label="总面积"
            prop="area"
          ></el-table-column>
          <el-table-column
            align="center"
            label="操作员"
            prop="operate"
          ></el-table-column>
          <el-table-column align="center" label="创建日期" prop="createtime">
            <template slot-scope="scope">
               <el-button
                icon="el-icon-edit"
                type="primary"
                circle
                @click="amend(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteItem(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>


         <el-dialog
          title="修改信息"
          :visible.sync="dialogFormVisible"
          width="500px"
        >
          <el-form :model="amendform" label-width="150px">
          <el-form-item label="编号">
              <el-input
                v-model="amendform.id"
               
              ></el-input>
            </el-form-item>

            <el-form-item label="房源编号">
              <el-input
                v-model="amendform.houseid"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="状态">
              <el-input v-model="amendform.state" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="房源类型">
              <el-input v-model="amendform.housetype" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="单位价格">
              <el-input
                v-model="amendform.price"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="总面积">
              <el-input
                v-model="amendform.area"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="操作员">
              <el-input
                v-model="amendform.operate"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="创建日期">
              <el-input
                v-model="amendform.createtime"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submited(amendform)"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </template>
    </el-card>
  </div>
</template> 
<script>
import axios from "axios";

export default {
  data() {
    return {
      form: {
        username: "",
        phone: "",
        createtime: "",
      },
      usernames: [], //用户信息
      state:'1',
         dialogFormVisible: false,
      amendform: {
      "id":"",
      "houseid": "",
      "state": "",
      "type": "",
      "price": "",
      "area": "",
      "operate": "",
      "createtime": ""
      },
    };
  },
  methods: {
    /** 查询用户信息 */
    async search() {
      let data = await axios.get("housingresources");
      this.usernames = data.data;
    },
    reset(form) {a
      this.$refs[form].resetFields();
    },
    /**删除用户信息 */
    async deleteItem(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "残忍删除",
        cancelButtonText: "我再想想",
        type: "warning",
        center: true,
      }).then(async () => {
        let data = await axios.delete(`housingresources/${id}`);
        //提示用户删除成功
        this.$message({ message: "删除成功", type: "success" });
        //刷新界面
        this.search();
      });
    },
    /**修改房源信息 */
     amend(value) {
      console.log(value);
      this.dialogFormVisible = true;
      this.amendform = value;
    },
    //修改数据
      async submited(amendform) {
      this.dialogFormVisible = false;
      let data = await axios.put(`housingresources/${amendform.id}`, this.amendform);
      //提示用户修改成功
      this.$message({ message: "编辑成功", type: "success" });
      //刷新页面
      this.search()
    },
 
  },
  mounted() {
    this.search();
  },
};
</script>

<style lang="scss">
.put {
  display: flex;
  margin: 0 20px 0 20px;
}
.input {
  width: 300px;
  display: flex;
  margin: 0 20px;
}
.el-menu--horizontal > .el-menu-item {
  margin-right: 50px;
}

.el-form-item__label {
  min-width: 70px;
}
</style>
